<template>
  <SubLayout @refresh="() => { }" :showRefresh="false">
    <template #default>
      <h4 class="divider">基本信息</h4>
      <ul class="base-list">
        <li>
          <div class="li-inner">
            <p>
              <span> 认证名称：</span>
              {{ detailData.name }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p><span> 缓存时间：</span> {{ detailData.cacheTime }}</p>
          </div>
        </li>
      </ul>
      <h4 class="divider">接口信息</h4>
      <ul class="base-list" v-if="detailData.authType == 0">
        <li>
          <div class="li-inner">
            <p>
              <span>接口类型：</span>
              RESTFUL_API
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p :title="detailData.url">
              <span>接口URL：</span> {{ detailData.url }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p><span>支持格式：</span> {{ detailData.inParamsFormat }}</p>
          </div>
        </li>

        <li>
          <div class="li-inner">
            <p><span>请求方式：</span> {{ detailData.httpMethod }}</p>
          </div>
        </li>
        <li style="width: 65%;">
          <div class="li-inner">
            <p>
              <span>接口文档：</span>
              <el-button type="text" v-show="detailData.docUrl">
                <a target="_blank" :href="detailData.docUrl" class="download" rel="noopener noreferrer">
                  {{ detailData.docUrl }}
                </a>
              </el-button>
            </p>
          </div>
        </li>
        <li style="width: 100%;">
          <div class="li-inner">
            <p><span>备注：</span> {{ detailData.memo }}</p>
          </div>
        </li>
      </ul>
      <ul class="base-list" v-else>
        <li>
          <div class="li-inner">
            <p>
              <span>接口类型：</span>
              JAVA定制
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p>
              <span>类名称：</span>
              {{ detailData.classFullName }}
            </p>
          </div>
        </li>
        <li style="width: 100%;">
          <div class="li-inner">
            <p>
              <span>jar文件包：</span>
              <el-button type="text" v-show="detailData.url">
                <a target="_blank" :href="detailData.url" class="download" rel="noopener noreferrer">
                  {{ detailData.url }}
                </a>
              </el-button>
              <!-- <a class="link" href="javascript:;">{{ detailData.url }}</a> -->
            </p>
          </div>
        </li>
        <li style="width: 100%;">
          <div class="li-inner">
            <p>
              <span>接口文档：</span>
              <el-button type="text" v-show="detailData.docUrl">
                <a target="_blank" :href="detailData.docUrl" class="download" rel="noopener noreferrer">
                  {{ detailData.docUrl }}
                </a>
              </el-button>
              <!-- <a class="link" href="javascript:;">{{ detailData.docUrl }}</a> -->
            </p>
          </div>
        </li>
        <li style="width: 100%;">
          <div class="li-inner">
            <p><span>备注：</span> {{ detailData.memo }}</p>
          </div>
        </li>
      </ul>
      <h4 class="divider">服务列表</h4>
      <!-- 服务列表 -->
      <DynamicTable
        class="table-container" 
        ref="DynamicTableRef"
        v-loading="listLoading"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list" :columns="tableColumns"
        @pagination="getList"
      />
      
    </template>
  </SubLayout>
</template>
  
<script setup lang="jsx">

import { onMounted, ref,reactive } from "vue";

import { getAuthDetail, getSvcByAuthId } from "@/api/adaptation";
import DynamicTable from "@/components/DynamicTable";
import { useRoute, useRouter } from "vue-router";
import SubLayout from '@/components/SubLayout';
import { useListManage } from "@/hooks";
const router = useRouter();
const route = useRoute();
const id = localStorage.getItem('authDetailId');
const detailData = ref({})
const props = defineProps();
const emit = defineEmits();
const query = reactive({
  id: id,
});
let {
  page,
  list,
  total,
  getList,
  listLoading,
  
} = useListManage(props, emit, {
  getItems: getSvcByAuthId,
  query: query,
  deleteItem: null,
  getDetail: null,
});
const tableColumns = ref([
  {
    label: "服务名称",
    key: "svcName",
    minWidth: "100px",
  },
  {
    label: "归属应用",
    key: "appName",
    minWidth: "100px",
  },
  {
    label: "归属部门",
    key: "orgName",
    minWidth: "100px",
  },
  {
    label: "方法名称",
    key: "svcUrl",
    minWidth: "100px",
  },
  {
    label: "版本号",
    key: "versionNum",
    minWidth: "100px",
  },
  
  {
    label: "上线状态",
    minWidth: "100px",
    render: (h, { row, index }) => (
      <span class={row.onlineSts == 'A' ? 'online' : row.onlineSts == 'D' ? 'outline' : 'test'}>
        {row.onlineSts == 'A' ? '已上线' : row.onlineSts == 'D' ? '未上线' : '草稿'}
      </span>
    ),
  },
  {
    label: "操作",
    fixed: "right",
    width: "100px",
    render: (h, params) => (
      <span>
        {
          <el-button
            type="text"
            size="small"
            onClick={() =>
              router.push(
                `/system/auth/authDetail/service?id=${params.row.svcId}`
              )

            }
          >
            详情
          </el-button>
        }
      </span>
    ),
  },
])

const getDetail = async (id) => {
  let { data } = await getAuthDetail(id);
  detailData.value = data;
};




onMounted(() => {
  getDetail(id);
  console.log('dd')
  getList()
});
</script>
  
<style lang="scss" scoped>
ul.base-list {
  overflow: hidden;

  li {
    width: 33.33%;
    display: inline-block;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 0 10px;

    .li-inner {
      padding: 0 5px;
    }

    &.w100 {
      width: 100%;
    }

    p {
      min-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #3c475d;
    }

    span {
      font-weight: bolder;
    }
  }
}

.desc {
  padding: 10px 0;
}

.export-api {
  border-top: solid 1px #ebeef5;
  padding: 10px 0;
  margin-top: 65px;
}

:deep(.online) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(42, 207, 138, 1);
  color: rgba(42, 207, 138, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/online.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.outline) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 139, 58, 1);
  color: rgba(255, 139, 58, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.test) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid #909399;
  color: #909399;
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}

.table-container {
  height: calc(100% - 320px);
}
</style>
  